<template>
 <div
        class="content-card"
            :key="item.id"
          >
            <div
              class="card-image"
              :style="{ backgroundImage: `url(${item.image})` }"
            ></div>
            <div class="card-content">
              <div class="card-tag">
                <img :src="pen" width="22" />
                {{ item.tag }}
              </div>
              <h3 :title="item.title">{{ item.title }}</h3>
              <div class="card-meta">
                <div class="author-info">
                  <img
                    :src="item.author.avatar"
                    :alt="item.author.name"
                    class="author-avatar"
                  />
                  <div class="card-stats">
                    <span class="author-name">{{ item.author.name }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="week-view">
              <div class="stat-item">
                <el-icon>
                  <View />
                </el-icon>
                <span>{{ item.views }}</span>
              </div>
              <div class="stat-item">
                <el-icon>
                  <Clock />
                </el-icon>
                <span>{{ item.timeAgo }}</span>
              </div>
            </div>
          </div>
</template>
<script setup>
import {defineProps } from "vue";
import pen from "@/assets/pen.png";
import {  Clock, View } from '@element-plus/icons-vue'
const props = defineProps({
  item: {
    type: Object,
    default: {}
  },
});
</script>
<style lang='scss' scoped>
      
      .content-card {
        background: #322e3e;
        border-radius: 16px;
        overflow: hidden;
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;
        cursor: pointer;

        &:hover {
          background: rgba(255, 255, 255, 0.15);
          transform: translateY(-4px);
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
          .week-view {
            border-top: 1px solid #322e3e;
          }
        }

        .card-image {
          width: 100%;
          height: 229px;
          border-radius: 10px 10px 0 0;
          background-size: cover;
          background-position: center;
          background-color: #4a90e2;
        }

        .card-content {
          padding: 18px 0 2px 20px;
          display: flex;
          flex-direction: column;

          h3 {
            min-height: 55px;
            font-weight: 500;
            font-size: 20px;
            color: #ffffff;
            margin: 0 0 16px 0;
            -webkit-box-orient: vertical;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
          }
          .card-tag {
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 16px;
            color: rgba(254, 254, 254, 0.6);
            display: flex;
            align-items: center;
            margin-bottom: 10px;
          }
          .card-meta {
            .author-info {
              display: flex;
              align-items: center;
              gap: 8px;

              .author-avatar {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                object-fit: cover;
              }

              .author-name {
                font-size: 18px;
                color: rgba(255, 255, 255, 0.9);
                font-weight: 500;
              }

              .content-type {
                font-size: 12px;
                color: rgba(255, 255, 255, 0.6);
                background: rgba(255, 255, 255, 0.1);
                padding: 2px 8px;
                border-radius: 12px;
                margin-left: auto;
              }
            }

            .card-stats {
              width: 100%;
              display: flex;
              flex-direction: column;

              .stat-item {
                display: flex;
                align-items: center;
                gap: 4px;
                font-size: 12px;
                color: rgba(255, 255, 255, 0.7);

                .el-icon {
                  font-size: 14px;
                }
              }
            }
          }
        }
        .week-view {
          margin-top: 30px;
          display: flex;
          justify-content: space-between;
          font-weight: 400;
          font-size: 16px;
          color: rgba(254, 254, 254, 0.6);
          padding: 0 20px;
          height: 38px;
          border-top: 1px solid #414055;
          .stat-item {
            display: flex;
            align-items: center;
            .el-icon {
              margin-right: 6px;
            }
            svg {
              width: 22px;
              height: 22px;
            }
          }
        }
      }          
</style>